<template>
	<div class="visualizing-demo2 bg-blue-400">
		<!-- 顶部 -->

		<div class="big-data-down">
			<!-- 左边 -->
			<div class="big-data-down-left">
				<!-- 环境因素->重要经济目标 -->
				<div class="flex-warp-item" @click="pushToJingjimubiao">
					<div class="flex-warp-item-box">
						<div class="flex-title">重要经济目标</div>
						<div class="flex-content flex-content-overflow">
							<div class="sky">
								<i class="sky-left el-icon-office-building"></i>
								<div class="sky-center">
									<div class="mb2">
										<span class="font" ml-3>总体运行状态</span>
										<span>良</span>
									</div>
									<!-- <div class="sky-tip">温馨提示：多云转晴，南风转北风风力3级</div> -->
								</div>
								<div class="sky-right">
									<div class="mb2">
										<span>数量：</span>
										<span class="font">{{ SsysTypesCnt[6] }}</span>
										<!-- <span class="font">{{ dataJingjimubiao.total }}</span> -->
									</div>
								</div>
							</div>
							<div class="sky-dd">
								<div class="sky-dl" key="-1">
									<div>名称</div>
									<div>类别</div>
									<div>级别</div>
									<div>联系人</div>
									<div>状态</div>
								</div>
								<div class="sky-dl" v-for="(v, k) in dataJingjimubiao" :key="k" :class="{ 'sky-dl-first': k === 1 }">
									<div>{{ v.title }}</div>
									<div>{{ v.author }}</div>
									<div>
										<!-- 创建一个临时数组并遍历来显示图标 -->
										<i class="el-icon-star-on" v-for="n in parseInt(v.status)" :key="n"></i>
									</div>
									<div class="sky-phone" @click="handlePhoneClick(v.reviewer)">
										<i class="el-icon-phone"
											><span>{{ v.reviewer }}</span></i
										>
									</div>
									<div class="sky-status">{{ v.fullContent }}</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- 人防工程项目 -->
				<div class="flex-warp-item" @click="pushToRenfanggongcheng">
					<div class="flex-warp-item-box">
						<div class="flex-title">人防工程管理</div>
						<div class="flex-content flex-content-overflow">
							<div class="d-states">
								<div class="d-states-item">
									<i class="el-icon-odometer i-bg1"></i>
									<div class="d-states-flex">
										<div class="d-states-item-label">人防工程数</div>
										<div class="d-states-item-value">{{ dataRenfanggongcheng.countAll }}</div>
									</div>
								</div>
								<div class="d-states-item">
									<i class="el-icon-first-aid-kit i-bg2"></i>
									<div class="d-states-flex">
										<div class="d-states-item-label">竣工数</div>
										<div class="d-states-item-value">{{ dataRenfanggongcheng.countJungong }}</div>
									</div>
								</div>
								<div class="d-states-item">
									<i class="el-icon-video-play i-bg3"></i>
									<div class="d-states-flex">
										<div class="d-states-item-label">未竣工数</div>
										<div class="d-states-item-value">{{ dataRenfanggongcheng.countWeijungong }}</div>
									</div>
								</div>
							</div>

							<div class="d-btn">
								<div class="d-btn-item">
									<i class="d-btn-item-left el-icon-money"></i>
									<div class="d-btn-item-center">
										<div>
											公用工程: <span>{{ dataRenfanggongcheng.countGongyonggongcheng }}</span>
										</div>
									</div>
									<div class="d-btn-item-center">
										<div>
											单位工程: <span>{{ dataRenfanggongcheng.countDanweigongcheng }}</span>
										</div>
									</div>
									<div class="d-btn-item-center">
										<div>
											公共工程: <span>{{ dataRenfanggongcheng.countGonggonggongcheng }}</span>
										</div>
									</div>
								</div>
								<div class="d-btn-item">
									<i class="d-btn-item-left el-icon-money"></i>
									<div class="d-btn-item-center">
										<div>
											二等人员掩蔽所、物资库: <span>{{ dataRenfanggongcheng.countErdengrenyuanyanbisuojiwuziku }}</span>
										</div>
									</div>
									<div class="d-btn-item-center">
										<div>
											专业队员掩蔽部: <span>{{ dataRenfanggongcheng.countZhuanyeduiyuanyanbibu }}</span>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="flex-warp-item">
					<div class="flex-warp-item-box">
						<div class="flex-title">当前监控设备在线率</div>
						<div class="flex-content" ref="rightChartData1"></div>
					</div>
				</div>
			</div>

			<!-- 中间 -->
			<div class="big-data-down-center">
				<div class="big-data-down-center-one">
					<div class="big-data-down-center-one-content" ref="rightChartData5">
						<div ref="RefEarth" id="3DEarth" class="earth"></div>
						<div :class="v.topLevelClass" v-for="(v, k) in earth3DBtnList" :key="k" @click="changeRotationSpeed($event, k)">
							<div class="circle" v-for="i in 4" :key="i"></div>
							<div class="text-box">
								<i :class="v.icon" :style="{ color: v.color }"></i>
								<div class="text">{{ v.label }}</div>
							</div>
						</div>
					</div>
				</div>

				<div class="big-data-down-center-two">
					<div class="flex-warp-item-box">
						<div class="flex-title flex justify-between">
							<div class="flex items-center">
								<span>监控列表</span>
								<div class="w-8"></div>
								<div style="width: 30px">
									<el-image src="/static/images/icons/before.png" :fit="contain" @click="tapBefore" />
								</div>
								<div class="w-2"></div>
								<span>{{ videoDataPage + 1 }}</span>
								<div class="w-2"></div>
								<div style="width: 30px">
									<el-image src="/static/images/icons/next.png" :fit="contain" @click="tapNext" />
								</div>
							</div>
							<div class="flex items-center">
								<div id="tapMoreVideo" key="tapMoreVideo" class="flex items-center" @click="tapMoreVideo">
									<span style="color: #fa5151">查看更多</span>
									<div style="width: 20px; heigth: 10px">
										<el-image src="/static/images/icons/more.png" :fit="contain" />
										<!-- <el-image src="/static/images/icons/more.png" :fit="contain" @click="tapBefore" /> -->
									</div>
								</div>
							</div>
						</div>
						<div class="flex flex-grow text-white">
							<div v-for="(item, index) in videoDataArr" :key="index" class="shfBgvid flex flex-col items-center">
								<div class="h-2"></div>
								<div class="shfBgvideo">
									<XgFlvPlayer v-if="item.url" :src="item.url" />
								</div>
								<span>{{ item.remark }}</span>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- 右边 -->
			<div class="big-data-down-right">
				<!-- 三防动环数据统计 -->
				<div class="flex-warp-item">
					<div class="flex-warp-item-box">
						<div class="flex-title">
							<span>三防动环数据统计</span>
							<span class="flex-title-small"></span>
						</div>
						<div class="flex-content" ref="rightChartData3"></div>
					</div>
				</div>
				<!-- //驻地队伍统计 -->
				<div class="flex-warp-item">
					<div class="flex-warp-item-box">
						<div class="flex-title">
							驻地队伍统计<span>队伍总数：{{ zydwTypesCnt.totalCnt }}</span>
						</div>
						<div class="flex-content">
							<div class="task">
								<div class="task-item">
									<div class="task-item-box task1" @click="pushToYiliao">
										<div class="task-item-value">{{ zydwTypesCnt.yiliaoCnt }}</div>
										<div class="task-item-label">医疗</div>
									</div>
								</div>
								<div class="task-item">
									<div class="task-item-box task2" @click="pushToZhian">
										<div class="task-item-value">{{ zydwTypesCnt.zhianCnt }}</div>
										<div class="task-item-label">治安</div>
									</div>
								</div>
								<div class="task-item">
									<div class="task-item-box task3" @click="pushToTongxing">
										<div class="task-item-value">{{ zydwTypesCnt.tongxinCnt }}</div>
										<div class="task-item-label">通信</div>
									</div>
								</div>
								<div class="task-item">
									<div class="task-item-box task4" @click="pushToQiangxian">
										<div class="task-item-value">{{ zydwTypesCnt.qiangxianCnt }}</div>
										<div class="task-item-label">抢险</div>
									</div>
								</div>
								<div class="task-item">
									<div class="task-item-box task5" @click="pushToYunshu">
										<div class="task-item-value">{{ zydwTypesCnt.yunshuCnt }}</div>
										<div class="task-item-label">运输</div>
									</div>
								</div>
								<div class="task-item">
									<div class="task-item-box task5" @click="pushToFanghua">
										<div class="task-item-value">{{ zydwTypesCnt.fanghuaCnt }}</div>
										<div class="task-item-label">防化</div>
									</div>
								</div>
								<div class="task-item">
									<div class="task-item-box task5" @click="pushToXinli">
										<div class="task-item-value">{{ zydwTypesCnt.xinliCnt }}</div>
										<div class="task-item-label">心理</div>
									</div>
								</div>
							</div>
							<div ref="rightChartData6" class="progress"></div>
						</div>
					</div>
				</div>
				<div class="flex-warp-item">
					<div class="flex-warp-item-box">
						<div class="flex-title">
							<span>疏散要素统计(按类型)</span>
						</div>
						<div class="flex-content" ref="rightChartData2"></div>
					</div>
				</div>
			</div>
		</div>
		<div v-if="dialogtblVisible" class="fixed inset-0 flex justify-center items-center">
			<!--表项=====================================开始-->
			<div>
				<!--专业队伍-->
				<el-table
					v-if="curItem == '专业队伍'"
					:data="list"
					border
					fit
					highlight-current-row
					style="width: 100%"
					:row-style="tableRowStyle"
					:header-cell-style="tableHeaderColor"
					max-height="500"
					@mouseenter="onTableMouseEnter()"
					@mouseleave="onTableMouseLeavel()"
				>
					<el-table-column :label="t('message.layout.id')" prop="abstractContent" align="center" width="80">
						<template #default="{ row }">
							<span>{{ row.abstractContent }}</span>
						</template>
					</el-table-column>
					<el-table-column :label="t('message.layout.title')" min-width="100px" align="center">
						<template #default="{ row }">
							<span class="link-type">{{ row.title }}</span>
						</template>
					</el-table-column>
					<el-table-column :label="t('message.layout.phone')" width="180px" align="center">
						<template #default="{ row }">
							<span>{{ row.timestamp }}</span>
						</template>
					</el-table-column>
					<el-table-column :label="t('message.layout.author')" width="180px" align="center">
						<template #default="{ row }">
							<span>{{ row.author }}</span>
						</template>
					</el-table-column>
					<el-table-column :label="t('message.layout.managementUnit')" width="105px" align="center">
						<template #default="{ row }">
							<span>{{ row.importance }}</span>
						</template>
					</el-table-column>
					<el-table-column :label="t('message.layout.pepoleNum')" align="center" width="200">
						<template #default="{ row }">
							<span class="link-type">{{ row.pageviews }}</span>
						</template>
					</el-table-column>
					<el-table-column :label="t('message.layout.organizationalSystem')" class-name="status-col" width="100">
						<template #default="{ row }">
							<span>
								{{ row.status }}
							</span>
						</template>
					</el-table-column>
				</el-table>
				<!--指挥机构-->
				<el-table
					v-else-if="curItem == '指挥机构'"
					:data="list"
					border
					fit
					highlight-current-row
					style="width: 100%"
					:row-style="tableRowStyle"
					:header-cell-style="tableHeaderColor"
					max-height="500"
					@mouseenter="onTableMouseEnter()"
					@mouseleave="onTableMouseLeavel()"
				>
					<el-table-column :label="t('message.layout.title')" min-width="120px" align="center">
						<template #default="{ row }">
							<span class="link-type">{{ row.title }}</span>
						</template>
					</el-table-column>
					<el-table-column :label="t('message.layout.phone')" width="100px" align="center">
						<template #default="{ row }">
							<span>{{ row.timestamp }}</span>
						</template>
					</el-table-column>
					<el-table-column :label="t('message.layout.memberUnit')" width="120px" align="center">
						<template #default="{ row }">
							<span>{{ row.author }}</span>
						</template>
					</el-table-column>
					<el-table-column v-if="showReviewer" :label="t('message.layout.reviewer')" width="110px" align="center">
						<template #default="{ row }">
							<span>{{ row.reviewer }}</span>
						</template>
					</el-table-column>
					<el-table-column :label="t('message.layout.grade')" width="80px" align="center">
						<template #default="{ row }">
							<svg-icon v-for="n in +row.importance" :key="n" name="star" class="iconfont icon-xingji" />
						</template>
					</el-table-column>
					<el-table-column :label="t('message.layout.mainDuty')" align="center" width="200">
						<template #default="{ row }">
							<span class="link-type">{{ row.pageviews }}</span>
						</template>
					</el-table-column>
				</el-table>
				<!--警报器-->
				<el-table
					v-else-if="curItem == '警报器'"
					:data="list"
					border
					fit
					highlight-current-row
					style="width: 100%"
					:row-style="tableRowStyle"
					:header-cell-style="tableHeaderColor"
					max-height="500"
					@mouseenter="onTableMouseEnter()"
					@mouseleave="onTableMouseLeavel()"
				>
					<el-table-column :label="t('message.layout.id')" prop="abstractContent" align="center" width="80">
						<template #default="{ row }">
							<span>{{ row.abstractContent }}</span>
						</template>
					</el-table-column>
					<el-table-column :label="t('message.layout.phone')" width="80px" align="center">
						<template #default="{ row }">
							<span>{{ row.timestamp }}</span>
						</template>
					</el-table-column>
					<el-table-column :label="t('message.layout.title')" min-width="100px">
						<template #default="{ row }">
							<span class="link-type">{{ row.title }}</span>
						</template>
					</el-table-column>
					<el-table-column :label="t('message.layout.author')" width="90px" align="center">
						<template #default="{ row }">
							<span>{{ row.author }}</span>
						</template>
					</el-table-column>
					<el-table-column :label="t('message.layout.reviewer')" width="80px" align="center">
						<template #default="{ row }">
							<span>{{ row.reviewer }}</span>
						</template>
					</el-table-column>
					<el-table-column :label="t('message.layout.managementUnit')" width="85px">
						<template #default="{ row }">
							<span>{{ row.importance }}</span>
						</template>
					</el-table-column>
					<el-table-column :label="t('message.layout.location')" align="center" width="100">
						<template #default="{ row }">
							<span class="link-type" @click="handleGetPageviews(row.pageviews)">{{ row.pageviews }}</span>
						</template>
					</el-table-column>
					<el-table-column :label="t('message.layout.area')" class-name="status-col" width="100">
						<template #default="{ row }">
							<span>
								{{ row.status }}
							</span>
						</template>
					</el-table-column>
				</el-table>
				<!--经济目标-->
				<el-table
					v-else
					:data="list"
					border
					fit
					highlight-current-row
					style="width: 100%"
					:row-style="tableRowStyle"
					:header-cell-style="tableHeaderColor"
					max-height="500"
					@mouseenter="onTableMouseEnter()"
					@mouseleave="onTableMouseLeavel()"
				>
					<el-table-column :label="t('message.layout.id')" prop="abstractContent" align="center" width="80">
						<template #default="{ row }">
							<span>{{ row.abstractContent }}</span>
						</template>
					</el-table-column>
					<el-table-column :label="t('message.layout.title')" min-width="100px" align="center">
						<template #default="{ row }">
							<span class="link-type">{{ row.title }}</span>
						</template>
					</el-table-column>
					<el-table-column :label="t('message.layout.author')" width="80px" align="center">
						<template #default="{ row }">
							<span>{{ row.author }}</span>
						</template>
					</el-table-column>
					<el-table-column :label="t('message.layout.importance')" width="70px" align="center">
						<template #default="{ row }">
							<svg-icon v-for="n in +row.status" :key="n" name="star" class="iconfont icon-xingji" />
						</template>
					</el-table-column>
					<el-table-column :label="t('message.layout.readings')" align="center" width="95">
						<template #default="{ row }">
							<span class="link-type">{{ row.pageviews }}</span>
						</template>
					</el-table-column>
					<el-table-column :label="t('message.layout.status')" class-name="status-col" width="65" align="center">
						<template #default="{ row }">
							<span>
								{{ row.fullContent }}
							</span>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<!--表项=========================================结束-->
		</div>
	</div>
</template>

<script lang="ts">
import { toRefs, reactive, onBeforeMount, onMounted, onUnmounted, getCurrentInstance, defineComponent, watch, onActivated, ref, nextTick } from 'vue';
import * as echarts from 'echarts';
import 'echarts-gl';
import { formatDate } from '/@/utils/formatTime';
import { dropdownList, skyList, dBtnList, earth3DBtnList, chartData4List } from './mock/demo2';
import worldImg from './images/world.jpg';
import bathymetryImg from './images/bathymetry.jpg';
import { useI18n } from 'vue-i18n';
import { ArticleModel } from '/@/model/articleModel';
import '/@/assets/iconfont/iconfont.css';
import { getArticles, ArticleType } from '/@/request/articles';
import StrUnit from '/@/utils/shf/StrUnit';
import { ElRate, ElContainer, ElRow, ElCol } from 'element-plus';
import XgFlvPlayer from '/@/components/xgFlvPlayer/index.vue';
import HttpVidReq from '/@/utils/shf/http/HttpVidReq';
import VideoVo from '/@/utils/vo/VideoVo';
import { useRoute, useRouter } from 'vue-router';
import { debug } from 'console';

export default defineComponent({
	name: 'visualizingLinkDemo2',
	components: { XgFlvPlayer },
	setup() {
		const router = useRouter();
		const { t } = useI18n();
		const { proxy } = getCurrentInstance() as any;
		let isMidBtnMouseenter = false;
		let isFocusTable = false;
		const videoList: VideoVo[] = [];
		const state = reactive({
			time: {
				txt: '',
				fun: 0,
			},
			dropdownList,
			dropdownActive: '子系统入口',
			skyList,
			dBtnList,
			chartData4Index: 0,
			dBtnActive: 0,
			earth3DBtnList,
			chartData4List,
			myCharts: [],
			getTblData: {},
			dialogtblVisible: false,
			itemOptions: ['专业队伍', '疏散要素', '战备资源', '警告器'],
			getTblType: ['zhuanyeduiwu', 'shusanyaosu', 'zhanbeiziyuan', 'jinggaoqi'],
			pagedata: {
				currentPage: 1,
				pageCount: 1000,
			},
			list: Array<ArticleModel>(),
			total: 0,
			curItem: '',
			my3dChart: null,
			waterQuality: 3,
			videoDataArr: [
				{ remark: '', url: '' },
				{ remark: '', url: '' },
				{ remark: '', url: '' },
				{ remark: '', url: '' },
			],
			videoDataPage: 0,
			dataJingjimubiao: [],
			dataRenfanggongcheng: [],
			getSsysTblData: {},
			SsysTypesCnt: [],
			zydwTypesCnt: {
				yiliaoCnt: 0,
				zhianCnt: 0,
				tongxinCnt: 0,
				qiangxianCnt: 0,
				yunshuCnt: 0,
				fanghuaCnt: 0,
				xinliCnt: 0,
				totalCnt: 0,
			},
			jijieDian: [],
			baozhangDian: [],
			jingbaoDian: [],
			shusanLuxianData: [],
			luxianDian: [],
			shusandiyuDian: [],
			shusanDiyuData: [],
			yinbidiyuDian: [],
			yinbiDiyuData: [],
			getZydwTblData: {},
		});
		const rightChartData5 = ref();
		let globalChartShusanyaosu: any = null;

		const tapChildXiTong = () => {
			window.location.replace(`http://${window.location.host}/#/gridLayout`); //黄山
		};
		const clickBack = () => {
			// window.history.back();
			// window.location.replace(`http://${window.location.host}/static/index.html#/visualizing`)
			window.history.replaceState(null, '', `http://${window.location.host}/index.html`); //黄山
			window.history.go(0);
		};
		const tblDialogShowByLoc = (offsetx, offsety) => {
			let el = proxy.$refs.elTable;
			let locx, locy;
			if (offsetx > 1120) locx = 1170;
			else locx = offsetx + 50;
			//el.style.left = locx + "px";

			if (offsety > 300) locy = offsety - 300;
			else locy = offsety + 70;
			//el.style.top = locy + "px";

			//ElMessage.success(offsetx+','+offsety);
			state.dialogtblVisible = true;
		};
		const tableRowStyle = ({ row, rowIndex }) => {
			return 'background-color:#000055;color:#FAC858;font-size:15px;text-align:center';
		};
		//设置表头行的样式
		const tableHeaderColor = ({ row, column, rowIndex, columnIndex }) => {
			return 'background-color:#000055;color:#fff;font-wight:500;font-size:20px;text-align:center';
		};

		const midBtnMouseenter = async (event, k) => {
			return;
		};
		const midBtnMouseleave = () => {
			return;
		};
		// 初始化时间
		const initTime = () => {
			state.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW QQQQ ZZZ');
			state.time.fun = window.setInterval(() => {
				state.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW QQQQ ZZZ');
			}, 1000);
		};
		//#region 当前监控设备在线率
		const initRightChartData1 = () => {
			const myChart = echarts.init(proxy.$refs.rightChartData1);
			var option = {
				legend: {
					orient: 'vertical',
					left: 'left',
					top: 'middle',
					textStyle: {
						color: 'white',
					},
					data: ['总在线率', '河道局监控', '沙石局监控', '交通运输局'], // 图例
				},
				series: [
					// 总的在线率
					{
						name: '总在线率',
						type: 'pie',
						radius: ['45%', '50%'],
						center: ['60%', '25%'],
						startAngle: 90,
						data: [
							{ value: 100, name: '在线率', itemStyle: { color: '#5470c6' } }, // 主颜色
							{ value: 0, name: '剩余', itemStyle: { color: 'rgba(0,0,0,0.1)' } }, // 剩余部分透明显示
						],
						label: {
							position: 'center',
							formatter: '{d}%\n在线率',
							color: 'white',
							fontSize: 15,
						},
						labelLine: {
							show: false,
						},
						itemStyle: {
							borderWidth: 0,
						},
						emphasis: {
							scale: false,
						},
					},
					// 第一个圆环
					{
						name: '河道局监控',
						type: 'pie',
						radius: ['35%', '40%'],
						center: ['35%', '78%'],
						startAngle: 90,
						data: [
							{ value: 100, name: '完成率', itemStyle: { color: '#91cc75' } }, // 主颜色
							{ value: 0, name: '剩余', itemStyle: { color: 'rgba(0,0,0,0.1)' } }, // 剩余部分透明显示
						],
						label: {
							position: 'center',
							formatter: '{d}%',
							color: 'white',
							fontSize: 10,
						},
						labelLine: {
							show: false,
						},
						itemStyle: {
							borderWidth: 0,
						},
						emphasis: {
							scale: false,
						},
					},
					// 第二个圆环
					{
						name: '沙石局监控',
						type: 'pie',
						radius: ['35%', '40%'],
						center: ['60%', '78%'],
						startAngle: 90,
						data: [
							{ value: 100, name: '完成率', itemStyle: { color: '#fac858' } }, // 主颜色
							{ value: 0, name: '剩余', itemStyle: { color: 'rgba(0,0,0,0.1)' } }, // 剩余部分透明显示
						],
						label: {
							position: 'center',
							formatter: '{d}%',
							color: 'white',
							fontSize: 10,
						},
						labelLine: {
							show: false,
						},
						itemStyle: {
							borderWidth: 0,
						},
						emphasis: {
							scale: false,
						},
					},
					// 第三个圆环
					{
						name: '交通运输局',
						type: 'pie',
						radius: ['35%', '40%'],
						center: ['85%', '78%'],
						startAngle: 90,
						data: [
							{ value: 100, name: '完成率', itemStyle: { color: '#e66' } }, // 主颜色
							{ value: 0, name: '剩余', itemStyle: { color: 'rgba(0,0,0,0.1)' } }, // 剩余部分透明显示
						],
						label: {
							position: 'center',
							formatter: '{d}%',
							color: 'white',
							fontSize: 10,
						},
						labelLine: {
							show: false,
						},
						itemStyle: {
							borderWidth: 0,
						},
						emphasis: {
							scale: false,
						},
					},
				],
			};
			myChart.setOption(option);
			state.myCharts.push(myChart);
		};
		//#endregion
		// 温湿度氧气一氧化碳
		const initRightChartData3 = async () => {
			const myChart = echarts.init(proxy.$refs.rightChartData3);
			var dates: any[] = [];
			var temperature: any[] = [];
			var humidity: any[] = [];
			var oxygen: any[] = [];
			var carbonMonoxide: any[] = [];
			if ((window as any)['reqUrl'] === 'http://localhost:8085') {
				// 假数据
				dates = ['01-17', '01-18', '01-19', '01-20', '01-21', '01-22']; // 日期
				temperature = [22, 24, 20, 21, 23, 22]; // 温度
				humidity = [30, 32, 29, 35, 33, 31]; // 湿度
				oxygen = [21, 20, 22, 21, 19, 20]; // 氧气
				carbonMonoxide = [1.2, 1.5, 1.1, 1.3, 1.4, 1.2]; // 一氧化碳
			} else {
				await fetch('http://172.17.30.1:8010/sensor/log/list?currentPage=0&pageCount=6', {
					method: 'GET',
				})
					.then((res) => res.json())
					.then((res) => {
						res.data?.content.forEach((item) => {
							dates.unshift(item.creationDateTime.substring(5, 10));
							temperature.unshift(item.temperature);
							humidity.unshift(item.humidity);
							oxygen.unshift(item.oxygen);
							carbonMonoxide.unshift(item.carbon);
						});
					});
			}
			var option = {
				grid: {
					top: 40,
					right: 20,
					bottom: 20,
					left: 20,
				},
				tooltip: {
					trigger: 'axis',
				},
				legend: {
					data: ['温度', '湿度', '氧气', '一氧化碳'],
					textStyle: {
						color: 'white',
					},
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: dates,
				},
				yAxis: [
					{
						type: 'value',
						name: '温度 (°C)',
						//最小值设为温度数组的最小值
						min: Math.min.apply(null, temperature) - 8,
						max: Math.max.apply(null, temperature),
						show: false,
					},
					{
						type: 'value',
						name: '湿度(%)',
						min: Math.min.apply(null, humidity) - 11,
						max: Math.max.apply(null, humidity) + 6,
						// min: 30,
						// max: 40,
						show: false,
					},
					{
						type: 'value',
						name: '氧气(%)',
						min: Math.min.apply(null, oxygen) - 2,
						max: Math.max.apply(null, oxygen) + 4,
						// min: 18,
						// max: 23,
						show: false,
					},
					{
						type: 'value',
						name: 'CO(ppm)',
						min: Math.min.apply(null, carbonMonoxide),
						max: Math.max.apply(null, carbonMonoxide) + 6,
						// min: 1,
						// max: 2,
						show: false,
					},
				],
				series: [
					{
						name: '温度',
						type: 'line',
						data: temperature,
						yAxisIndex: 0,
						itemStyle: {
							color: 'blue',
						},
						label: {
							normal: {
								show: true,
								position: 'top',
								formatter: '{c} °C',
								textStyle: {
									color: 'white',
									fontSize: 12,
									fontFamily: 'Arial',
									fontWeight: 'bold',
								},
							},
						},
					},
					{
						name: '湿度',
						type: 'line',
						data: humidity,
						yAxisIndex: 1,
						itemStyle: {
							color: 'yellow',
						},
						label: {
							normal: {
								show: true,
								position: 'top',
								formatter: '{c} %',
								textStyle: {
									color: 'white',
									fontSize: 12,
									fontFamily: 'Arial',
									fontWeight: 'bold',
								},
							},
						},
					},
					{
						name: '氧气',
						type: 'line',
						data: oxygen,
						yAxisIndex: 2,
						itemStyle: {
							color: 'green',
						},
						label: {
							normal: {
								show: true,
								position: 'top',
								formatter: '{c} %',
								textStyle: {
									color: 'white',
									fontSize: 12,
									fontFamily: 'Arial',
									fontWeight: 'bold',
								},
							},
						},
					},
					{
						name: '一氧化碳',
						type: 'line',
						data: carbonMonoxide,
						yAxisIndex: 3,
						itemStyle: {
							color: 'red',
						},
						label: {
							normal: {
								show: true,
								position: 'top',
								formatter: '{c} ppm',
								textStyle: {
									color: 'white',
									fontSize: 12,
									fontFamily: 'Arial',
									fontWeight: 'bold',
								},
							},
						},
					},
				],
			};
			myChart.setOption(option);
			// 监听图例选中状态变化事件
			myChart.on('legendselectchanged', function (params) {
				// 检查图例的选中状态，并更新对应系列的颜色
				const updatedSeries: echarts.SeriesOption[] = [];
				for (var i = 0; i < option.series.length; i++) {
					if (option.series[i].name === params.name) {
						updatedSeries.push({
							name: params.name,
							itemStyle: {
								normal: {
									color: params.selected[params.name] ? option.series[i].itemStyle.color : 'gray', // 选中状态为绿色，未选中为灰色
								},
							},
						});
					}
				}
				myChart.setOption({
					series: updatedSeries,
				});
			});
			state.myCharts.push(myChart);
		};
		// 驻地队伍统计
		const initRightChartData6 = () => {
			const myChart = echarts.init(proxy.$refs.rightChartData6);
			const option = {
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow',
					},
				},
				grid: {
					top: 20,
					// right: 50,
					bottom: 20,
					// left: 80,
				},
				xAxis: [
					{
						type: 'category',
						data: ['医疗', '治安', '通信', '抢险', '运输', '防化', '心理'],
						axisTick: {
							alignWithLabel: true,
						},
						axisLabel: {
							color: '#A7D6F4',
							fontSize: 12,
						},
					},
				],
				yAxis: [
					{
						type: 'value',
						axisLine: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						splitLine: {
							show: false,
						},
						min: 0,
						max: 2,
						interval: 1,
					},
				],
				series: [
					{
						name: '标准化',
						type: 'bar',
						barWidth: 10,
						label: {
							show: false,
							position: 'top',
							color: '#A7D6F4',
							fontSize: 12,
							formatter: '{c}',
						},
						itemStyle: {
							barBorderRadius: [20, 20, 0, 0],
							color: new echarts.graphic.LinearGradient(
								0,
								0,
								0,
								1,
								[
									{ offset: 0, color: '#51C5FD' },
									{ offset: 1, color: '#005BB1' },
								],
								false
							),
						},
						data: [2, 2, 2, 2, 1, 2, 1],
					},
				],
			};

			myChart.setOption(option);

			myChart.getZr().on('click', function (params) {
				let pointInPixel = [params.offsetX, params.offsetY];
				if (myChart.containPixel('grid', pointInPixel)) {
					//点击第几个柱子
					let pointInGrid = myChart.convertFromPixel({ seriesIndex: 0 }, pointInPixel);
					// 也可以通过params.offsetY 来判断鼠标点击的位置是否是图表展示区里面的位置
					// 也可以通过name[xIndex] != undefined，name是x轴的坐标名称来判断是否还是点击的图表里面的内容
					// x轴数据的索引
					let xIndex = pointInGrid[0];
					// y轴数据的索引
					let yIndex = pointInGrid[1];
					let selectName = option.xAxis[0].data[xIndex];
					router.push(`/menu/menu1/menu12/menu127?type=${encodeURIComponent(selectName + '队伍')}&name=`);
				}
			});

			state.myCharts.push(myChart);
		};
		// 疏散要素统计
		const initRightChartData2 = () => {
			const myChart = echarts.init(proxy.$refs.rightChartData2);
			const option = {
				grid: {
					top: 10,
					right: 0,
					bottom: 20,
					left: 30,
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow',
					},
				},
				xAxis: {
					data: ['保障点', '集结点', '疏散路线', '疏散地域', '隐蔽地域', '警报点'],
					axisLine: {
						lineStyle: {
							color: 'rgba(22, 207, 208, 0.5)',
							width: 1,
						},
					},
					axisTick: {
						show: false,
					},
					axisLabel: {
						color: '#c0d1f2',
					},
				},
				yAxis: [
					{
						type: 'value',

						axisLine: {
							show: true,
							lineStyle: {
								color: 'rgba(22, 207, 208, 0.1)',
							},
						},
						axisLabel: {
							color: '#c0d1f2',
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: 'rgba(22, 207, 208, 0.3)',
							},
						},
						splitArea: {
							show: true,
							areaStyle: {
								color: 'rgba(22, 207, 208, 0.02)',
							},
						},
						nameTextStyle: {
							color: '#16cfd0',
						},
					},
					{
						type: 'value',
						position: 'right',
						axisLine: {
							show: false,
						},
						axisLabel: {
							show: true,
							formatter: '{value}%',
							textStyle: {
								color: '#16cfd0',
							},
						},
						splitLine: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						splitArea: {
							show: true,
							areaStyle: {
								color: 'rgba(22, 207, 208, 0.02)',
							},
						},
						nameTextStyle: {
							color: '#16cfd0',
						},
					},
				],
				series: [
					{
						name: '全区域数量',
						type: 'line',
						yAxisIndex: 1,
						smooth: true,
						showAllSymbol: true,
						symbol: 'circle',
						itemStyle: {
							color: '#058cff',
						},
						lineStyle: {
							color: '#058cff',
						},
						areaStyle: {
							color: 'rgba(5,140,255, 0.2)',
						},
						data: state.SsysTypesCnt,
					},
					{
						name: '本区域数量',
						type: 'bar',
						barWidth: 15,
						itemStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
									{
										offset: 0,
										color: '#00FFE3',
									},
									{
										offset: 1,
										color: '#4693EC',
									},
								]),
							},
						},
						data: state.SsysTypesCnt,
					},
				],
			};
			myChart.setOption(option);
			myChart.getZr().on('click', function (params) {
				let pointInPixel = [params.offsetX, params.offsetY];
				if (myChart.containPixel('grid', pointInPixel)) {
					//点击第几个柱子
					let pointInGrid = myChart.convertFromPixel({ seriesIndex: 0 }, pointInPixel);
					// 也可以通过params.offsetY 来判断鼠标点击的位置是否是图表展示区里面的位置
					// 也可以通过name[xIndex] != undefined，name是x轴的坐标名称来判断是否还是点击的图表里面的内容
					// x轴数据的索引
					let xIndex = pointInGrid[0];
					// y轴数据的索引
					let yIndex = pointInGrid[1];
					let selectName = option.xAxis.data[xIndex];
					if (selectName == '警报点') {
						router.push(`/menu/menu1/menu12/menu127?type=${encodeURIComponent('防空' + selectName)}&name=`);
					} else {
						router.push(`/menu/menu1/menu12/menu127?type=${encodeURIComponent(selectName)}&name=`);
					}
				}
			});
			state.myCharts.push(myChart);
		};
		// 3DEarth 地图
		const init3DEarth = (globeRadius: any) => {
			console.log('%c [ document.body.clientWidth ]-1252', 'font-size:13px; background:pink; color:#bf2c9f;', document.body.clientWidth);
			console.log('%c [ globeRadius ]-1188', 'font-size:13px; background:pink; color:#bf2c9f;', globeRadius);
			let el = <HTMLElement>document.getElementById('3DEarth');
			el.style.height = `${rightChartData5.value.offsetHeight}px`;
			const myChart = echarts.init(el);
			const option = {
				globe: {
					baseTexture: worldImg,
					heightTexture: bathymetryImg,
					shading: 'realistic',
					light: {
						ambient: {
							intensity: 7,
						},
						main: {
							intensity: 7,
						},
					},
					viewControl: {
						autoRotate: true,
						autoRotateSpeed: 10,
					},
					postEffect: {
						enable: true,
						bloom: {
							enable: true,
						},
					},
					// globeRadius,
				},
				series: {
					type: 'lines3D',
					coordinateSystem: 'globe',
					blendMode: 'lighter',
					lineStyle: {
						width: 1,
						color: 'rgb(50, 50, 150)',
						opacity: 0.1,
					},
					data: [],
				},
			};
			// 随机模拟攻击线
			let rodamData = function () {
				let longitude = 105.18;
				let longitude2 = Math.random() * 360 - 180;
				let latitude = 37.51;
				let latitude2 = Math.random() * 180 - 90;
				return {
					coords: [
						[longitude2, latitude2],
						[longitude, latitude],
					],
					value: (Math.random() * 3000).toFixed(2),
				};
			};
			for (let i = 0; i < 150; i++) {
				option.series.data = option.series.data.concat(rodamData());
			}
			myChart.setOption(option);
			state.myCharts.push(myChart);
		};
		// 监听地球大小变化
		const initAddEventListener3DEarth = () => {
			let w = document.body.clientWidth;
			let globeRadius = 0;
			if (w >= 1920) globeRadius = 100;
			else if (w > 1200 && w < 1920) globeRadius = 70;
			else if (w > 992 && w <= 1200) globeRadius = 60;
			else if (w > 768 && w <= 992) globeRadius = 40;
			else if (w < 768) globeRadius = 20;
			init3DEarth(globeRadius);
		};
		// 批量设置 echarts resize
		const initEchartsResize = () => {
			initAddEventListener3DEarth();
			window.addEventListener('resize', () => {
				console.log('%c [ state.myCharts ]-1266', 'font-size:13px; background:pink; color:#bf2c9f;', state.myCharts);
				for (let i = 0; i < state.myCharts.length; i++) {
					state.myCharts[i].resize();
				}
				// initAddEventListener3DEarth();
			});
		};
		const onTableEnter = () => {
			isFocusTable = true;
		};
		const onTableLeavel = () => {};
		const onTableMouseEnter = () => {
			isFocusTable = true;
		};
		const onTableMouseLeavel = () => {
			isFocusTable = false;
			state.dialogtblVisible = false;
		};
		const changeRotationSpeed = async (event, k) => {
			if (k === 0) {
				router.push('/menu/menu1/menu12/menu127?type=%E9%98%9F%E4%BC%8D%E7%82%B9&name=');
			} else if (k === 1) {
				router.push('/menu/menu1/menu11');
			} else if (k === 2) {
				router.push('/menu/menu3');
			} else if (k === 3) {
				router.push('/menu/menu1/menu12/menu127?type=%E9%98%B2%E7%A9%BA%E8%AD%A6%E6%8A%A5%E7%82%B9&name=');
			}
		};
		//#region route.push
		const pushToJingjimubiao = () => {
			router.push('/menu/menu1/menu12/menu127?type=%E7%BB%8F%E6%B5%8E%E7%9B%AE%E6%A0%87&name=');
		};
		const pushToRenfanggongcheng = () => {
			router.push('/menu/menu1/menu12/menu127?type=%E4%BA%BA%E9%98%B2%E7%82%B9&name=');
		};
		const pushToYiliao = () => {
			router.push('/menu/menu1/menu12/menu127?type=%E5%8C%BB%E7%96%97%E9%98%9F%E4%BC%8D&name=');
		};
		const pushToZhian = () => {
			router.push('/menu/menu1/menu12/menu127?type=%E6%B2%BB%E5%AE%89%E9%98%9F%E4%BC%8D&name=');
		};
		const pushToTongxing = () => {
			router.push('/menu/menu1/menu12/menu127?type=%E9%80%9A%E4%BF%A1%E9%98%9F%E4%BC%8D&name=');
		};
		const pushToQiangxian = () => {
			router.push('/menu/menu1/menu12/menu127?type=%E6%8A%A2%E9%99%A9%E9%98%9F%E4%BC%8D&name=');
		};
		const pushToYunshu = () => {
			router.push('/menu/menu1/menu12/menu127?type=%E8%BF%90%E8%BE%93%E9%98%9F%E4%BC%8D&name=');
		};
		const pushToFanghua = () => {
			router.push('/menu/menu1/menu12/menu127?type=%E9%98%B2%E5%8C%96%E9%98%9F%E4%BC%8D&name=');
		};
		const pushToXinli = () => {
			router.push('/menu/menu1/menu12/menu127?type=%E5%BF%83%E7%90%86%E9%98%9F%E4%BC%8D&name=');
		};
		//#endregion
		const fetchData = async () => {
			//#region 获取疏散要素
			state.getSsysTblData = {};
			await getArticles(state.pagedata, ArticleType.SSYS)
				.then((res) => {
					state.getSsysTblData = res;
				})
				.catch((err) => {
					ElMessage.warning('加载疏散要素错误');
					return;
				});
			let sslxNameArr = [];
			let ssdyNameArr = [];
			let ybdyNameArr = [];
			state.getSsysTblData.data.forEach((ele, i) => {
				switch (ele.importance) {
					case '集结点':
						{
							state.jijieDian.push({
								name: ele.title,
								value: [ele.sourceURL, ele.imageURL],
							});
						}
						break;
					case '经济目标':
						{
							state.dataJingjimubiao.push(ele);
						}
						break;
					case '疏散路线':
						{
							//路线点
							if (sslxNameArr.indexOf(ele.title) == -1) {
								sslxNameArr.push(ele.title);
								state.luxianDian.push({
									name: ele.title,
									value: [ele.sourceURL, ele.imageURL, 100],
									label: { show: true },
								});
							} else {
								state.luxianDian.push({
									name: ele.title,
									value: [ele.sourceURL, ele.imageURL],
								});
							}
						}
						break;
					case '疏散地域':
						{
							//疏散地域点
							if (ssdyNameArr.indexOf(ele.title) == -1) {
								ssdyNameArr.push(ele.title);
								state.shusandiyuDian.push({
									name: ele.title,
									value: [ele.sourceURL, ele.imageURL],
								});
							}
						}
						break;
					case '隐蔽地域':
						{
							//疏散地域点
							if (ybdyNameArr.indexOf(ele.title) == -1) {
								ybdyNameArr.push(ele.title);
								state.yinbidiyuDian.push({
									name: ele.title,
									value: [ele.sourceURL, ele.imageURL],
								});
							}
						}
						break;
					case '保障点':
						{
							state.baozhangDian.push({
								name: ele.title,
								value: [ele.sourceURL, ele.imageURL],
							});
						}
						break;
					case '防空警报点':
						{
							state.jingbaoDian.push({
								name: ele.title,
								value: [ele.sourceURL, ele.imageURL],
							});
						}
						break;
					default:
						{
						}
						break;
				}
			});
			//疏散路线
			sslxNameArr.forEach((nameEle) => {
				let j = 0,
					idx = 0;
				state.getSsysTblData.data.forEach((ele) => {
					if (ele.importance == '疏散路线' && nameEle == ele.title) {
						if (!j) {
							idx =
								state.shusanLuxianData.push({
									name: nameEle,
									coords: [[ele.sourceURL, ele.imageURL]],
								}) - 1;
						} else {
							state.shusanLuxianData[idx].coords.push([ele.sourceURL, ele.imageURL]);
						}
						j++;
					}
				});
			});
			//疏散地域
			ssdyNameArr.forEach((nameEle) => {
				let j = 0,
					idx = 0;
				let startp = [];
				let endp = [];
				state.getSsysTblData.data.forEach((ele) => {
					if (ele.importance == '疏散地域' && nameEle == ele.title) {
						if (!j) {
							startp = [ele.sourceURL, ele.imageURL];
							idx =
								state.shusanDiyuData.push({
									name: nameEle,
									coords: [startp],
								}) - 1;
						} else {
							endp = [ele.sourceURL, ele.imageURL];
						}
						j++;
					}
				});
				if (startp.length > 0 && endp.length > 0) {
					state.shusanDiyuData[idx].coords.push([endp[0], startp[1]], endp, [startp[0], endp[1]], startp);
				}
			});
			//隐蔽地域
			ybdyNameArr.forEach((nameEle) => {
				let j = 0,
					idx = 0;
				let startp = [];
				let endp = [];
				state.getSsysTblData.data.forEach((ele) => {
					if (ele.importance == '隐蔽地域' && nameEle == ele.title) {
						if (!j) {
							startp = [ele.sourceURL, ele.imageURL];
							idx =
								state.yinbiDiyuData.push({
									name: nameEle,
									coords: [startp],
								}) - 1;
						} else {
							endp = [ele.sourceURL, ele.imageURL];
						}
						j++;
					}
				});
				if (startp.length > 0 && endp.length > 0) {
					state.yinbiDiyuData[idx].coords.push([endp[0], startp[1]], endp, [startp[0], endp[1]], startp);
				}
			});
			state.SsysTypesCnt[1] = state.jijieDian.length;
			state.SsysTypesCnt[2] = state.shusanLuxianData.length;
			state.SsysTypesCnt[3] = state.shusanDiyuData.length;
			state.SsysTypesCnt[4] = state.yinbiDiyuData.length;
			state.SsysTypesCnt[0] = state.baozhangDian.length;
			state.SsysTypesCnt[5] = state.jingbaoDian.length;
			state.SsysTypesCnt[6] = state.dataJingjimubiao.length;
			//获取驻地队伍
			await getArticles(state.pagedata, ArticleType.ZYDW)
				.then((res) => {
					state.getZydwTblData = res;
				})
				.catch((err) => {
					ElMessage.warning('加载专业队伍错误');
					return;
				});
			state.zydwTypesCnt.yiliaoCnt = 0;
			state.zydwTypesCnt.zhianCnt = 0;
			state.zydwTypesCnt.tongxinCnt = 0;
			state.zydwTypesCnt.qiangxianCnt = 0;
			state.zydwTypesCnt.yunshuCnt = 0;
			state.zydwTypesCnt.fanghuaCnt = 0;
			state.zydwTypesCnt.xinliCnt = 0;
			state.zydwTypesCnt.totalCnt = 0;
			state.getZydwTblData.data.forEach((ele) => {
				switch (ele.type) {
					case '医疗':
						{
							state.zydwTypesCnt.yiliaoCnt++;
						}
						break;
					case '治安':
						{
							state.zydwTypesCnt.zhianCnt++;
						}
						break;

					case '通信':
						{
							state.zydwTypesCnt.tongxinCnt++;
						}
						break;

					case '抢险':
						{
							state.zydwTypesCnt.qiangxianCnt++;
						}
						break;

					case '交通':
						{
							state.zydwTypesCnt.yunshuCnt++;
						}
						break;

					case '防化':
						{
							state.zydwTypesCnt.fanghuaCnt++;
						}
						break;
					case '心理':
						{
							state.zydwTypesCnt.xinliCnt++;
						}
						break;
					default:
						{
						}
						break;
				}
			});
			state.zydwTypesCnt.totalCnt =
				state.zydwTypesCnt.yiliaoCnt +
				state.zydwTypesCnt.zhianCnt +
				state.zydwTypesCnt.tongxinCnt +
				state.zydwTypesCnt.qiangxianCnt +
				state.zydwTypesCnt.yunshuCnt +
				state.zydwTypesCnt.fanghuaCnt +
				state.zydwTypesCnt.xinliCnt;
			//#endregion
			// 获取人防工程数据
			const formData2 = new FormData();
			formData2.append('currentPage', 1);
			formData2.append('pageCount', 999999);
			await fetch(`${(window as any)['reqUrl']}/zhihuijigou/getRfgcCount`, {
				method: 'POST',
			})
				.then((res) => res.json())
				.then((res) => {
					state.dataRenfanggongcheng = res;
				});
		};
		//#region 监控列表图表
		const refreshVideo = () => {
			let first = state.videoDataPage * 4; //4 5 6 7
			let last = state.videoDataPage * 4 + 3;
			for (const data of state.videoDataArr) {
				data.remark = '';
				data.url = '';
			}
			setTimeout(() => {
				let j = 0;
				for (let i = first; i <= last; i++) {
					let vo = videoList[i];
					if (vo && vo.url) {
						state.videoDataArr[j].url = (window as any)['rstpAddr'] + vo.url;
						state.videoDataArr[j].remark = vo.remark;
					}
					j++;
				}
			}, 200);
		};
		const tapBefore = () => {
			if (state.videoDataPage > 0) {
				state.videoDataPage--;
				refreshVideo();
			}
		};
		const tapNext = () => {
			state.videoDataPage++;
			refreshVideo();
		};
		const tapMoreVideo = () => {
			window.parent.postMessage(
				{
					type: 'gis-msg',
					value: '/monitor',
				},
				'*'
			);
		};
		//#endregion
		const receiveMsg = (e) => {
			if (e && e.data && e.data.value) {
				router.push({
					path: e.data.value,
				});
			}
		};
		const initVideoList = async () => {
			let listData: any = await HttpVidReq.getList();
			if (listData) {
				for (const data of listData) {
					let vo = new VideoVo(data);
					videoList.push(vo);
				}
				refreshVideo();
			}
		};
		const handlePhoneClick = (reviewer) => {
			window.parent.postMessage(
				{
					type: 'dispatch',
					value: reviewer,
				},
				'*'
			);
		};
		// const rightChartData5 = ref<HTMLElement | null>(null);
		const RefEarth = ref<HTMLElement | null>(null);
		const styleObject = ref({});

		const updateSize = () => {
			if (rightChartData5.value && RefEarth.value) {
				const parentWidth = rightChartData5.value.offsetWidth;
				const parentHeight = rightChartData5.value.offsetHeight;
				const canvas = RefEarth.value.querySelector('canvas');

				if(canvas === null) return;
				const scaleX = parentWidth / canvas.offsetWidth;
				// const scaleX = parentWidth / canvas.width;
				const scaleY = parentHeight / canvas.offsetHeight;

				// 由于canvas不直接位于#3DEarth下，计算transform-origin
				const offsetX = (parentWidth - canvas.width * Math.min(scaleX, scaleY)) / 2;
				const offsetY = (parentHeight - canvas.height * Math.min(scaleX, scaleY)) / 2;

				canvas.style.transform = `translate(-50%, -50%) scale(${scaleX}, ${scaleY})`;
				canvas.style.transformOrigin = `center center`;
				// canvas.style.transformOrigin = `${50 + offsetX / scaleX}% ${50 + offsetY / scaleY}%`;
				canvas.style.left = '50%';
				canvas.style.top = '50%';
				styleObject.value = {
					// transform: `scale(${Math.min(scaleX, scaleY)})`,
					// transform: `scale(${scaleX}, ${scaleY})`,
					transform: `scale(1)`,
					transformOrigin: 'top left',
				};
			}
		};
		// 页面加载时
		onMounted(async () => {
			await init3DEarth(100);
			// updateSize();
			window.onresize = updateSize;
			window.addEventListener('resize', updateSize);
			initTime();
			// await initEchartsResize();
			await fetchData();
			await initRightChartData1();
			await initRightChartData3();
			await initRightChartData2();
			await initRightChartData6();
			await initVideoList();
			window.addEventListener('message', receiveMsg, false);
		});
		watch(() => [rightChartData5.value?.offsetWidth, rightChartData5.value?.offsetHeight], updateSize, { deep: true });

		// 页面卸载时
		onUnmounted(() => {
			window.clearInterval(state.time.fun);
			for (let i = 0; i < state.myCharts.length; i++) {
				state.myCharts[i].dispose();
			}
		});
		return {
			...toRefs(state),
			midBtnMouseenter,
			midBtnMouseleave,
			t,
			tableRowStyle,
			tableHeaderColor,
			clickBack,
			onTableEnter,
			onTableLeavel,
			onTableMouseEnter,
			onTableMouseLeavel,
			tapChildXiTong,
			changeRotationSpeed,
			tapNext,
			tapBefore,
			tapMoreVideo,
			pushToJingjimubiao,
			pushToRenfanggongcheng,
			pushToYiliao,
			pushToZhian,
			pushToTongxing,
			pushToQiangxian,
			pushToYunshu,
			pushToFanghua,
			pushToXinli,
			rightChartData5,
			handlePhoneClick,
			RefEarth,
			styleObject,
		};
	},
});
</script>

<style scoped lang="scss">
.visualizing-demo2 {
	height: 100%;
	width: 100%;
	overflow: hidden;
	background: url('/@/assets/vadmin-mock/visualizing/demo2.jpg');
	background-size: 100% 100%;
	display: flex;
	flex-direction: column;
	font-size: 13px;
	.big-data-up {
		height: 70px;
		width: 100%;
		display: flex;
		align-items: center;
		padding: 0 15px;
		color: #43bdf0;
		overflow: hidden;
		.up-left {
			width: 30%;
			font-style: italic;
		}
		.up-center {
			width: 40%;
			display: flex;
			justify-content: center;
			font-size: 20px;
			letter-spacing: 5px;
			background-image: -webkit-linear-gradient(left, #43bdf0, #c0d1f2 25%, #43bdf0 50%, #c0d1f2 75%, #43bdf0);
			-webkit-text-fill-color: transparent;
			background-clip: text;
			-webkit-background-clip: text;
			background-size: 200% 100%;
			animation: masked-animation 4s infinite linear;
			-webkit-box-reflect: below -2px -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(255, 255, 255, 0.1)));
			@keyframes masked-animation {
				0% {
					background-position: 0 0;
				}
				100% {
					background-position: -100% 0;
				}
			}
			position: relative;
			&::after {
				content: '';
				width: 50%;
				position: absolute;
				bottom: -15px;
				left: 50%;
				transform: translateX(-50%);
				border: 1px transparent solid;
				border-image: linear-gradient(to right, rgba(0, 0, 0, 0.1), #43bdf0) 1 10;
			}
			span {
				cursor: pointer;
			}
		}
		.up-right {
			width: 30%;
			justify-content: flex-end;
			display: flex;
			align-items: center;
			.ml15:hover {
				cursor: pointer;
			}
			::v-deep(.el-dropdown) {
				font-size: 13px !important;
				color: #43bdf0;
				cursor: pointer;
			}
		}
	}
	.big-data-down {
		flex: 1;
		overflow: hidden;
		display: flex;
		.big-data-down-left,
		.big-data-down-right {
			width: 30%;
			display: flex;
			flex-direction: column;
			.flex-warp-item {
				padding: 0 7.5px 15px 15px;
				width: 100%;
				height: 33.33%;
				.flex-warp-item-box {
					width: 100%;
					height: 100%;
					background: rgba(22, 34, 58, 0.4);
					display: flex;
					flex-direction: column;
					padding: 10px;
					.flex-title {
						margin-bottom: 15px;
						color: #c0d1f2;
						display: flex;
						justify-content: space-between;
						.flex-title-small {
							font-size: 12px;
						}
					}
					.flex-content {
						flex: 1;
						font-size: 12px;
					}
					.flex-content-overflow {
						overflow-y: auto;
					}
				}
			}
		}
		.big-data-down-left {
			color: #c0d1f2;
			.flex-warp-item {
				.flex-title {
					font-size: large;
				}
			}
			.sky {
				display: flex;
				align-items: center;
				.sky-left {
					font-size: 30px;
				}
				.sky-center {
					flex: 1;
					overflow: hidden;
					padding: 0 10px;
					.font {
						margin-right: 15px;
						background: unset !important;
						border-radius: unset !important;
						padding: unset !important;
						font-size: 20px;
					}
					span {
						background: #22bc76;
						border-radius: 2px;
						padding: 0 5px;
					}
					.sky-tip {
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
				.sky-right {
					span {
						font-size: 14px;
					}
					font {
						font-size: 14px;
					}
				}
			}
			.sky-dd {
				.sky-dl {
					display: flex;
					align-items: center;
					height: 28px;
					overflow: hidden;
					div {
						flex: 1;
						overflow: hidden;
						i {
							font-size: 14px;
							span {
								font-size: 10px;
							}
						}
					}
					.sky-status {
						background: #22bc76;
						border-radius: 2px;
						padding: 0 5px;
						text-align: center;
					}
					.sky-phone {
						font-size: 10px !important;
					}
					.tip {
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
					&:hover {
						background: rgba(0, 0, 0, 0.05);
						cursor: default;
						border-radius: 4px;
					}
					&:first-child:hover {
						background: unset;
					}
					:first-child {
						flex: 2;
						text-align: center;
					}
					:nth-child(2) {
						flex: 2;
						text-align: center;
					}
					:nth-child(4) {
						flex: 2;
						text-align: center;
					}
					:last-child {
						flex: 1;
					}
				}
				.sky-dl-first {
					color: #43bdf0;
				}
			}
			.d-states {
				display: flex;
				.d-states-item {
					flex: 1;
					display: flex;
					align-items: center;
					overflow: hidden;
					i {
						font-size: 20px;
						height: 33px;
						width: 33px;
						line-height: 33px;
						text-align: center;
						border-radius: 100%;
						flex-shrink: 1;
					}
					.i-bg1 {
						background: #22bc76;
					}
					.i-bg2 {
						background: #e2356d;
					}
					.i-bg3 {
						background: #43bbef;
					}
					.d-states-flex {
						overflow: hidden;
						padding: 0 10px 0;
						.d-states-item-label {
							color: #43bdf0;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
						.d-states-item-value {
							font-size: 20px;
							text-align: center;
						}
					}
				}
			}
			.d-btn {
				margin-top: 15px;
				.d-btn-item {
					border: 1px solid #c0d1f2;
					display: flex;
					width: 100%;
					height: 35px;
					border-radius: 35px;
					align-items: center;
					padding: 0 4px;
					margin-top: 15px;
					cursor: pointer;
					transition: all ease 0.3s;
					.d-btn-item-left {
						font-size: 20px;
						border: 1px solid #c0d1f2;
						width: 25px;
						height: 25px;
						line-height: 25px;
						border-radius: 100%;
						text-align: center;
						font-size: 14px;
					}
					.d-btn-item-center {
						padding: 0 10px;
						flex: 1;
					}
					.d-btn-item-eight {
						text-align: right;
						padding-right: 10px;
					}
				}
				.d-btn-active {
					transition: all ease 0.3s;
					border: 1px solid #43bdf0;
					color: #43bdf0;
					.d-btn-item-left {
						border: 1px solid #43bdf0;
					}
				}
			}
		}
		.big-data-down-center {
			width: 40%;
			display: flex;
			flex-direction: column;
			.big-data-down-center-one {
				height: 66.67%;
				padding: 0 7.5px 15px;
				.big-data-down-center-one-content {
					height: 100%;
					position: relative;
					object-fit: contain;
					.fixed-top,
					.fixed-right,
					.fixed-bottom,
					.fixed-left {
						position: absolute;
						width: 100px;
						height: 100px;
						display: flex;
						cursor: pointer;
						.circle {
							position: absolute;
							border-radius: 50%;
							background: rgba(0, 0, 0, 0.01);
							z-index: 10;
						}
						.text-box {
							position: relative;
							z-index: 11;
							color: #c0d1f2;
							margin: auto;
							text-align: center;
							font-size: 12px;
							i {
								font-size: 28px;
								margin-bottom: 10px;
							}
						}
					}
					.earth > div {
					  width: 100%;  /* 容器宽度 */
					  height: 100%; /* 容器高度 */
					  display: flex;
					  justify-content: center;
					  align-items: center;
					  overflow: hidden;
					}
					.fixed-top {
						left: 20px;
						top: 20px;
					}
					.fixed-right {
						right: 20px;
						top: 20px;
					}
					.fixed-bottom {
						right: 20px;
						bottom: 20px;
					}
					.fixed-left {
						left: 20px;
						bottom: 20px;
					}
					.circle:nth-of-type(1) {
						width: 100px;
						height: 95px;
						animation: turnAround 6s infinite linear;
						box-shadow: 0 0 1px 0 #be56ad, inset 0 0 10px 0 #c73587;
					}
					.circle:nth-of-type(2) {
						width: 95px;
						height: 100px;
						animation: turnAround 10s infinite linear;
						box-shadow: 0 0 1px 0 #9be619, inset 0 0 10px 0 #f5fd19;
					}
					.circle:nth-of-type(3) {
						width: 110px;
						height: 100px;
						animation: turnAround 5s infinite linear;
						box-shadow: 0 0 1px 0 #93e973, inset 0 0 10px 0 #99d686;
					}
					.circle:nth-of-type(4) {
						width: 100px;
						height: 110px;
						animation: turnAround 15s infinite linear;
						box-shadow: 0 0 1px 0 rgb(38, 233, 185), inset 0 0 10px 0 rgb(163, 212, 232);
					}
					@keyframes turnAround {
						100% {
							transform: rotate(360deg);
						}
					}
					.text {
						font-size: 18px;
					}
				}
			}
			.big-data-down-center-two {
				padding: 0 7.5px 15px;
				height: 33.33%;
				.flex-warp-item-box {
					width: 100%;
					height: 100%;
					background: rgba(22, 34, 58, 0.4);
					display: flex;
					flex-direction: column;
					padding: 15px;
					.flex-title {
						margin-bottom: 15px;
						color: #c0d1f2;
						display: flex;
						justify-content: space-between;
						.flex-title-small {
							font-size: 12px;
						}
					}
					.flex-content {
						flex: 1;
						font-size: 12px;
						display: flex;
						height: calc(100% - 30px);
						.flex-content-left {
							display: flex;
							flex-wrap: wrap;
							width: 120px;
							height: 100%;
							.monitor-item {
								width: 50%;
								display: flex;
								align-items: center;
								.monitor-wave {
									cursor: pointer;
									width: 40px;
									height: 40px;
									position: relative;
									background-color: #43bdf0;
									border-radius: 50%;
									overflow: hidden;
									text-align: center;
									&::before,
									&::after {
										content: '';
										position: absolute;
										left: 50%;
										width: 40px;
										height: 40px;
										background: #f4f4f4;
										animation: roateOne 10s linear infinite;
										transform: translateX(-50%);
										z-index: 1;
									}
									&::before {
										bottom: 10px;
										border-radius: 60%;
									}
									&::after {
										bottom: 8px;
										opacity: 0.7;
										border-radius: 37%;
									}
									.monitor-z-index {
										position: relative;
										z-index: 2;
										color: #4eb8ff;
										display: flex;
										align-items: center;
										height: 100%;
										justify-content: center;
										font-weight: bold;
									}
								}
								@keyframes roateOne {
									0% {
										transform: translate(-50%, 0) rotateZ(0deg);
									}
									50% {
										transform: translate(-50%, -2%) rotateZ(180deg);
									}
									100% {
										transform: translate(-50%, 0%) rotateZ(360deg);
									}
								}
								.monitor-active {
									background-color: #22bc76;
									.monitor-z-index {
										color: #22bc76;
									}
								}
							}
						}
						.flex-content-right {
							flex: 1;
						}
					}
				}
			}
		}
		.big-data-down-right {
			.flex-warp-item {
				padding: 0 15px 15px 7.5px;
				.flex-content {
					display: flex;
					flex-direction: column;
					.task {
						display: flex;
						height: 45px;
						.task-item {
							flex: 1;
							color: #c0d1f2;
							display: flex;
							justify-content: center;
							.task-item-box {
								position: relative;
								width: 45px;
								height: 45px;
								overflow: hidden;
								border-radius: 100%;
								z-index: 0;
								display: flex;
								align-items: center;
								flex-direction: column;
								justify-content: center;
								box-shadow: 0 10px 12px 0 rgba(0, 0, 0, 0.3);
								&::before {
									content: '';
									position: absolute;
									z-index: -2;
									left: -50%;
									top: -50%;
									width: 200%;
									height: 200%;
									background-repeat: no-repeat;
									background-size: 50% 50%, 50% 50%;
									background-position: 0 0, 100% 0, 100% 100%, 0 100%;
									background-image: linear-gradient(#19d4ae, #19d4ae), linear-gradient(#5ab1ef, #5ab1ef), linear-gradient(#fa6e86, #fa6e86),
										linear-gradient(#ffb980, #ffb980);
									animation: rotate 2s linear infinite;
								}
								&::after {
									content: '';
									position: absolute;
									z-index: -1;
									left: 1px;
									top: 1px;
									width: calc(100% - 2px);
									height: calc(100% - 2px);
									border-radius: 100%;
								}
								.task-item-value {
									text-align: center;
									font-size: 14px;
									font-weight: bold;
								}
								.task-item-label {
									text-align: center;
								}
							}
							.task1 {
								&::after {
									background: #5492be;
								}
							}
							.task2 {
								&::after {
									background: #43a177;
								}
							}
							.task3 {
								&::after {
									background: #a76077;
								}
							}
							.task4 {
								&::after {
									background: #b4825a;
								}
							}
							.task5 {
								&::after {
									background: #74568f;
								}
							}
						}
						.task-first-item {
							flex-direction: column;
							text-align: center;
							.task-first {
								font-size: 20px;
							}
						}
					}
				}
			}
			.progress {
				flex: 1;
			}
		}
	}
}

.shfBgvid {
	width: 100%;
	opacity: 1;
	background: linear-gradient(0deg, rgba(8, 20, 37, 0.5407) 10%, rgba(47, 61, 82, 0.0885) 100%);
	box-sizing: border-box;
	border: 2px solid;
	border-image: linear-gradient(180deg, #4192d9 1%, rgba(65, 146, 217, 0.3) 34%, rgba(65, 146, 217, 0.3) 68%, #4192d9 100%) 2;
	box-shadow: inset 0px -1px 3px 0.5px rgba(132, 160, 201, 0.44), inset 0px 5px 20px 0.5px rgba(43, 46, 52, 0.5606);
}
.shfBgvideo {
	width: 80%;
	height: 80%;
	opacity: 1;
	/* 表单文字 */
	background: #a8d6ff;
}
</style>
